<template>
	<view>
		<!-- 选择问题的类型 -->
		<view class="title padding20">
			选择问题类型
		</view>
		
		<view class="type-list">
			<view class="type-item mb10" 
			:class="{active: current === index}"
			v-for='(item, index) in ["功能问题", "性能问题", "体验问题", "其他"]'
			:key="index"
			@click="handleChoose(index)">
				{{item}}
			</view>
		</view>
		
		
		<!-- 问题的输入框 -->
		<textarea placeholder="请描述下您的问题" class="textarea padding20"/>
		
		<!-- 上传图片 -->
		<view class="title padding20">
			上传图片({{images.length}}/4)
		</view>
		
		<view class="img-list padding20">
			<view class="img-item" v-for="(item,index) in images" :key="item">
				<!-- 关闭按钮的图片 -->
				<icon type="clear" size="16" color="#ff0000" @click="deleteImage(index)"></icon>
				<image :src="item"></image>
			</view>
			<!-- 加号 -->
			<view class="add-image" @click="addImage">
				+
			</view>
		</view>
		
		<button type="warn" class="submit">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				images: [],
				max: 4
			}
		},
		methods: {
			// 选择问题类型的事件
			handleChoose(index) {
				this.current = index;
			},
			addImage(){
				let count = this.max-this.images.length
				if(count <= 0 ) {
					uni.showToast({
						title:'最多上传4张图片',
						icon: 'none'
					})
					return
				}
				uni.chooseImage({
				  count: count,
				  sizeType: ['original', 'compressed'],
				  sourceType: ['album', 'camera'],
				  success: (res) => {
				    // tempFilePath可以作为img标签的src属性显示图片
				    const tempFilePaths = res.tempFilePaths
					this.images = this.images.concat(tempFilePaths)
				  }
				})
			},
			deleteImage(index){
				this.images.splice(index,1)
			}
		}
	}
</script>

<style lang="scss">
.padding20{
	padding: 20rpx;
}

.mb10{
	margin-bottom: 20rpx!important;
}

.title{
	font-size: 14px;
}

.type-list{
	display: flex;
	flex-wrap: wrap;
	border-bottom: 10px #eee solid;
	
	.type-item{
		margin: 0 35rpx;
		height: 46rpx;
		line-height: 46rpx;
		width: 181rpx;
		text-align: center;
		border-radius: 50px;
		background: #eee;
		font-size: 12px;
		justify-self: flex-start;
	}
	
	.active{
		color: red;
		background: #ffe6e6;
		border-color: red;;
	}
}

.textarea{
	width: 100%;
	border-bottom: 10px #eee solid;
}

.img-list{
	display: flex;
	flex-wrap: wrap;
	margin: 0 10rpx;
	
	.img-item{
		width: 128rpx;
		height: 128rpx;
		position: relative;
		margin-right: 20rpx;
		 image{
			 width: 128rpx;
			 height: 128rpx;
			 display: block;
		 }
		 
		 icon{
			 position: absolute;
			 right: -5px;
			 top: -5px;
			 background: #fff;
			 border-radius: 50%;
		 }
	}
	
	.add-image{
		width: 128rpx;
		height: 128rpx;
		background: #999;
		font-size: 50rpx;
		line-height: 128rpx;
		text-align: center;
	}
}
</style>
